<template>
  <div class="dashboard-container">
    <!-- 矩阵驾驶舱演示系统首页 -->
    <div class="dashboard-header">
      <h1 class="dashboard-title">
        <el-icon class="title-icon">
          <Monitor />
        </el-icon>
        矩阵驾驶舱系统
      </h1>
      <p class="dashboard-subtitle">智能化数据监控与分析平台</p>
    </div>

    <!-- 核心指标卡片 -->
    <el-row :gutter="20" class="metrics-row">
      <el-col :span="6" :xs="12">
        <el-card shadow="hover" class="metric-card">
          <div class="metric-content">
            <div class="metric-icon primary">
              <el-icon size="24"><DataAnalysis /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">1,234</div>
              <div class="metric-label">数据处理量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card shadow="hover" class="metric-card">
          <div class="metric-content">
            <div class="metric-icon success">
              <el-icon size="24"><TrendCharts /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">98.5%</div>
              <div class="metric-label">系统可用性</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card shadow="hover" class="metric-card">
          <div class="metric-content">
            <div class="metric-icon warning">
              <el-icon size="24"><Warning /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">3</div>
              <div class="metric-label">待处理告警</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="12">
        <el-card shadow="hover" class="metric-card">
          <div class="metric-content">
            <div class="metric-icon info">
              <el-icon size="24"><Connection /></el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">156</div>
              <div class="metric-label">在线设备</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <span class="chart-title">实时数据趋势</span>
          </template>
          <div id="trendChart" ref="trendChart" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <span class="chart-title">系统状态分布</span>
          </template>
          <div id="statusChart" ref="statusChart" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作区域 -->
    <el-row :gutter="20" class="actions-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <span class="chart-title">快捷操作</span>
          </template>
          <div class="action-buttons">
            <el-button type="primary" size="large" @click="goToMatrix">
              <el-icon><Grid /></el-icon>
              矩阵业务系统
            </el-button>
            <el-button type="success" size="large" @click="goToIOT">
              <el-icon><Monitor /></el-icon>
              物联网平台
            </el-button>
            <el-button type="info" size="large" @click="viewReports">
              <el-icon><Document /></el-icon>
              查看报告
            </el-button>
            <el-button type="warning" size="large" @click="systemSettings">
              <el-icon><Setting /></el-icon>
              系统设置
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Dashboard" lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import {
  Monitor,
  DataAnalysis,
  TrendCharts,
  Warning,
  Connection,
  Grid,
  Document,
  Setting
} from '@element-plus/icons-vue'

const router = useRouter()
const trendChart = ref()
const statusChart = ref()

// 初始化趋势图表
const initTrendChart = () => {
  const chart = echarts.init(trendChart.value)
  const hours = []
  const data = []

  // 生成24小时的模拟数据
  for (let i = 0; i < 24; i++) {
    hours.push(i + ':00')
    data.push(Math.floor(Math.random() * 100) + 50)
  }

  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: hours
    },
    yAxis: {
      type: 'value',
      name: '数据量'
    },
    series: [
      {
        data: data,
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#409EFF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
          ])
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化状态分布图表
const initStatusChart = () => {
  const chart = echarts.init(statusChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '系统状态',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        data: [
          { value: 156, name: '正常运行', itemStyle: { color: '#67C23A' } },
          { value: 23, name: '维护中', itemStyle: { color: '#E6A23C' } },
          { value: 3, name: '异常', itemStyle: { color: '#F56C6C' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

// 快捷操作方法
const goToMatrix = () => {
  router.push('/matrix')
}

const goToIOT = () => {
  router.push('/IOT')
}

const viewReports = () => {
  console.log('查看报告')
}

const systemSettings = () => {
  console.log('系统设置')
}

// 组件挂载后初始化图表
onMounted(() => {
  nextTick(() => {
    initTrendChart()
    initStatusChart()
  })
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.dashboard-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.dashboard-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.title-icon {
  font-size: 32px;
}

.dashboard-subtitle {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

.metrics-row {
  margin-bottom: 20px;
}

.metric-card {
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-5px);
}

.metric-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.metric-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.metric-icon.primary {
  background: linear-gradient(135deg, #409EFF, #1890ff);
}

.metric-icon.success {
  background: linear-gradient(135deg, #67C23A, #52c41a);
}

.metric-icon.warning {
  background: linear-gradient(135deg, #E6A23C, #fa8c16);
}

.metric-icon.info {
  background: linear-gradient(135deg, #909399, #8c8c8c);
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.metric-label {
  font-size: 14px;
  color: #909399;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.actions-row {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-buttons .el-button {
  min-width: 140px;
  height: 50px;
  border-radius: 8px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
  
  .dashboard-title {
    font-size: 24px;
  }
  
  .action-buttons {
    justify-content: stretch;
  }
  
  .action-buttons .el-button {
    flex: 1;
    min-width: auto;
  }
}
</style>